﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grid栅格</title>
	<link href="../../../dist/css/color-ui.css" rel="stylesheet">
	<link href="../base.css" rel="stylesheet"/>
	<link href="grid.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<h1>栅格系统</h1>
		<h2>样例</h2>
		<div>
			<div class="row show-grid">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
			</div>
			<div class="row show-grid">
				<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>
			<div class="row show-grid">
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
			</div>
			<div class="row show-grid">
				<div class="col-xs-9">.col-xs-9</div>
				<div class="col-xs-4">.col-xs-4</div>
				<div class="col-xs-6">.col-xs-6</div>
			</div>
			<div class="row show-grid">
				<div class="col-xs-4">.col-xs-4</div>
				<div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>
			</div>
			<div class="row show-grid">
				<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
				<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
			</div>
			<div class="row show-grid">
				<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
			</div>
			</div>
	</div>
</body>
</html>
